<template>
  <view class="container">
    <!-- logo -->
    <view><image class="logo" src="https://img.qumoyugo.com/webimgbg/nurse_register_logo@2x.png" /></view>
    <view>
      <!-- 头像 -->
      <image class="header-image" :src="getImageUrl(user.headImg)" @click="() => popupHeader.open()" />
      <view class="nick-name">{{ user.name }}</view>
    </view>
    <button @click="logout" class="btn-zh">退出</button>
    <view class="image-botton-box">
      <image class="image-botton" src="https://img.qumoyugo.com/webimgbg/nurse_register_bg@2x.png" />
    </view>
    <!--  -->
    <uni-popup ref="popupHeaderList" background-color="#fff" type="bottom">
      <view class="background-list">
        <view class="title" style="margin-bottom: 20rpx; text-align: right">
          <uni-icons
            type="closeempty"
            size="18"
            color="#999999"
            style="font-weight: 300"
            @click="() => popupHeaderList.close()"
          ></uni-icons>
        </view>
        <view class="header-list-items">
          <view class="hes-hek" v-for="avatar in avatarList" :key="avatar">
            <img
              :src="getImageUrl(avatar)"
              class="header-img"
              :style="{ opacity: currentHeader === avatar ? '1' : '0.7' }"
              @click="() => (currentHeader = avatar)"
            />
            <view class="tips" v-if="currentHeader === avatar">
              <img src="https://img.qumoyugo.com/img/RP4XYCK8SGI4RJ2NETU631667280898778.png" class="img" />
            </view>
          </view>
          <view class="hes-hek">&nbsp;</view>
        </view>
        <view class="bottom-b" :style="{ background: currentHeader ? '#000000' : '#999999' }" @click="editHeader">
          确定
        </view>
      </view>
    </uni-popup>
    <!--  -->
    <uni-popup ref="popupHeader" background-color="#fff" type="bottom">
      <view class="sex-box">
        <view style="border-bottom: 1rpx solid #eeeeee" @click="uploadImage('Header')">上传头像</view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { computed, ref, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import { onShow } from '@dcloudio/uni-app'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const popupHeaderList = ref(null)
const popupHeader = ref(null)
const store = useStore()
const user = computed(() => store.state.profile)
// 选择头像
const uploadImage = name => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album'],
    success: res => {
      if (name === 'Header') {
        popupHeader.value.close()
      }
      uni.navigateTo({
        url: `/pages/cropper?path=${res.tempFilePaths[0]}&orgin=changeHeadImage`
      })
    }
  })
}
// 图片全路径处理
const getImageUrl = imageUrl => {
  imageUrl = imageUrl || ''
  if (imageUrl.indexOf('https') === -1) {
    return `https://img.qumoyugo.com${imageUrl}`
  } else {
    return imageUrl
  }
}
// 退出登录
const logout = () => {
  uni.showModal({
    title: '确定退出？',
    content: '',
    success: function (res) {
      if (res.confirm) {
        store.commit('setProfile', '')
        store.commit('setToken', '')
        uni.clearStorageSync()
        uni.redirectTo({
          url: '/pages/index'
        })
      }
    }
  })
}
onShow(() => {
  uni.$once('changeHeadImage', function (data) {
    $https({
      url: '/app/servicer/updateHeadImage',
      type: '',
      method: 'POST',
      data: {
        url: data.data
      }
    }).then(res => {
      if (res.code === 0) {
        $https({
          url: '/auth/profile',
          type: '',
          data: {
            currServicerId: user.value.id
          }
        }).then(profile => {
          if (profile.code === 0) {
            store.commit('setProfile', profile.data)
            // 返回数据中profile.data.type (类型0-活动核销员，1-洗护师)
          }
        })
      }
    })
  })
})
</script>

<style lang="scss" scoped>
.logo {
  margin-top: 43rpx;
  margin-left: 268.06rpx;
  width: 213.19rpx;
  height: 53.47rpx;
}
.header-image {
  margin-top: 147rpx;
  margin-left: 280rpx;
  width: 187rpx;
  height: 187rpx;
}
.nick-name {
  text-align: center;
  margin-top: 40rpx;
  font-size: 35rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 11rpx;
}
.btn-zh {
  margin-top: 70rpx;
  width: 444rpx;
  height: 90rpx;
  background: #525fa2;
  border-radius: 45rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-botton-box {
  width: 100%;
  text-align: center;
  margin-top: 241rpx;
}
.image-botton {
  margin: 0 auto;
  width: 515.28rpx;
  height: 363.19rpx;
}
.sex-box {
  line-height: 110rpx;
  text-align: center;
  margin: 0 30rpx;
}
</style>
